<template>
  <div class="card edit-field">
    <div class="card-body">
      <label for="edit-post" class="form-label">编辑帖子</label>
      <textarea v-model="content" class="form-control" id="edit-post" rows="3"></textarea>
      <button @click="post_a_post" type="button" class="btn btn-primary btn-sm">发帖</button>
    </div>
  </div>
</template>


<script>
import { ref } from 'vue';
import $ from 'jquery';
import { useStore } from 'vuex';

export default {
    name: "UserProfileWrite",
    setup(props, context) {
        const store = useStore();
        let content = ref('');
        
        const post_a_post = () => {
            $.ajax({
              url: "http://127.0.0.1:3005/myspace/addpost/",
              type: "POST",
              data: {
                user_id: store.state.user.id,
                content: content.value,
              },
              headers: {
                'Authorization': "Bearer " + store.state.user.token,
              },
              success(resp) {
                // console.log(resp);
                // console.log(content.value);
                // console.log(resp.id);
                if (resp.error_message === "success") {
                  const result = content.value + '+' + resp.id;
                  console.log(result);
                  context.emit('post_a_post', result);
                  content.value = "";
                }
              }
            });
        };

        return {
            content,
            post_a_post,
        }
    }
}
</script>


<style scoped>
.edit-field {
    margin-top: 20px;
}

button {
    margin-top: 10px;
}
</style>